﻿@using MoneyCounter.Helpers
@model MoneyCounter.Models.AddNewCheckManualyModel
@{
    ViewBag.Title = "Add New Check Manualy";
    Layout = "~/Views/Shared/UserPageTemplate.cshtml";
}
@section PageSpecificJavascript
{
    <script type="text/javascript" src="~/Scripts/MCP.ChecksHandler.js"></script>
    <script type="text/javascript" src="~/Scripts/MCP.Helper.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.linq.js"></script>
    <script type="text/javascript" src="~/Scripts/tag-it.js"></script>
    <script type="text/javascript" src="~/Scripts/tag-it.min.js"></script>
}
@section PageSpecificStylesheet
{
    @*<link rel="stylesheet" type="text/css" href="../../Content/tagit.ui-zendesk.css"/>*@
    <link rel="stylesheet" type="text/css" href="../../Content/jquery.tagit.css"/>
    <link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css"/>
    @*<link rel="stylesheet" type="text/css" href="../../Content/tagit.less"/>*@
}

<h2>Add new check (manualy)</h2>
<p>Categories count: @Model.Categories.Select(c => c.Name).Count()</p>

<div id="add-new-check">
    <div class="grid">
        <div class="row" id="totalPrice">
            <div class="span2">Total price:</div>
            <div class="input-control text span4">
                <input type="text" id="total-price-field" autofocus tabindex="1" />
                <a class="helper" href="#"></a>
            </div>
        </div>
        <div class="row" id="shop">
            <div class="span2">Shop:</div>
            <div class="input-control text span4">
                <input type="text" id="shop-name-field" tabindex="2"/>
                <button class="helper" href="#"></button>
            </div>
        </div>
    </div>
    <div id="itemsList"></div>
    <div id="new-check-item">
        <a id="addNewItemButton" href="#" class="">Add new item</a>
        <div class="grid" id="new-check-area">
            
            <div class="row">
                <div class="span3">Name:</div>
                <div class="input-control text span4">
                    <input type="text" id="new-item-Name" tabindex="3"/>
                    <a class="helper" href="#"></a>
                </div>
            </div>

            <div class="row">
                <div class="span3">Amount:</div>
                <div class="input-control text span4">
                    <input type="text" id="new-item-Amount" tabindex="4"/>
                    <a class="helper" href="#"></a>
                </div>
            </div>

            <div class="row">
                <div class="span3">Price per unit:</div>
                <div class="input-control text span4">
                    <input type="text" id="new-item-UnitPrice" tabindex="5" />
                    <a class="helper" href="#"></a>
                </div>
            </div>

            <div class="row">
                <div class="span3">Total price:</div>
                <div class="input-control text span4">
                    <input type="text" id="new-item-Price" tabindex="6" />
                    <a class="helper" href="#"></a>
                </div>
            </div>
            
            <div class="row span7">
                <input type="hidden" name="tags" id="check-categories">
                <span>Tags:<br></span>
                <ul class="span7" id="category-tag"></ul>
            </div>

            <div class="row">
                <a href='#' id='addNewItem_Apply' class='new-item-buttons' tabindex="8">Add</a>
                <a href='#' id='addNewItem_Cancel' class='new-item-buttons' onclick="MCP.ChecksHandler.ClearItem(); return false;">Clear</a>
            </div>
            
            
        </div>
    </div>
</div>

<br/>
<div id="navigation">
    <a href="#" id="save-check" class="apply">Save</a>
    <a href="/ChecksList/ChecksList" id="cancel-check" class="cancel">Cancel</a>
</div>


<div>@Html.ActionLink("Go back", "ChecksList", "ChecksList")</div>

<script type="text/javascript">
    var items = new Array();
    var categoriesCollection = @Html.Raw(Json.Encode(Model.Categories.Select(c => c.Name)));
    @*@(Model.Categories.Select(c => c.Name).ToArray().ToJson());*@
    
    $(function() {
        $("#addNewItemButton").click(function() {
            MCP.ChecksHandler.AddNewItemClick();
        });
        
        $("#save-check").click(function() {
            MCP.ChecksHandler.SaveCheck();
        });
        
        $("a#addNewItem_Apply")
	        .unbind('click')
	        .click(function () {
	            MCP.ChecksHandler.AddItem();
	        });
        $("a#addNewItem_Cancel")
	        .unbind('click')
	        .click(function () {
	            MCP.ChecksHandler.ClearItem();
	        });

        $("#category-tag").tagit({
            singleField: true,
            singleFieldNode: $('#check-categories'),
            allowSpaces: true,
            removeConfirmation: true,
            availableTags: categoriesCollection,
        });

        $('.ui-autocomplete-input').attr('tabindex', '7');
    });
</script>
